:root:not([theme-mode="dark"]){
    --yh-brand-color-2: #D4F8FB;
    --yh-brand-color-3: #86ccd0;
    --yh-brand-color-4: #86ccd0;
    --yh-brand-color-5: #69E9F3;
    --yh-brand-color-6: #01C9DA;
    --yh-brand-color-7: #1a99a4;
    --yh-brand-color: #018E9A;
    --yh-brand-color-9: #007680;
    --yh-warning-color: #ed7b2f;
    --yh-warning-color-1: #fef3e6;
    --yh-warning-color-2: #f9e0c7;
    --yh-warning-color-3: #f7c797;
    --yh-warning-color-4: #f2995f;
    --yh-warning-color-6: #d35a21;
    --yh-error-color: #e34d59;
    --yh-error-color-1: #fdecee;
    --yh-error-color-2: #f9d7d9;
    --yh-error-color-3: #f8b9be;
    --yh-error-color-5: #f36d78;
    --yh-error-color-7: #c9353f;
    --yh-success-color: #00a870;
    --yh-success-color-1: #e8f8f2;
    --yh-success-color-2: #bcebdc;
    --yh-success-color-3: #85dbbe;
    --yh-success-color-4: #48c79c;
    --yh-success-color-6: #078d5c;
    --yh-gray-color-1: #f3f3f3;
    --yh-gray-color-2: #eee;
    --yh-gray-color-3: #e7e7e7;
    --yh-gray-color-4: #dcdcdc;
    --yh-gray-color-5: #c5c5c5;
    --yh-gray-color-6: #a6a6a6;
    --yh-gray-color-7: #8b8b8b;
    --yh-gray-color-9: #5e5e5e;
    --yh-gray-color-10: #4b4b4b;
    --yh-gray-color-11: #383838;
    --yh-gray-color-12: #2c2c2c;
    --yh-gray-color-13: #242424;
    --yh-gray-color-14: #181818;
    --yh-font-white-1: #ffffff;
    --yh-font-white-2: rgba(255, 255, 255, .55);
    --yh-font-white-3: rgba(255, 255, 255, .35);
    --yh-font-white-4: rgba(255, 255, 255, .22);
    --yh-font-gray-1: rgba(0, 0, 0, .9);
    --yh-font-gray-2: rgba(0, 0, 0, .6);
    --yh-font-gray-3: rgba(0, 0, 0, .4);
    --yh-font-gray-4: rgba(0, 0, 0, .26);
    --yh-brand-color-hover: var(--yh-brand-color-7);
    --yh-brand-color-focus: var(--yh-brand-color-2);
    --yh-brand-color-active: var(--yh-brand-color-9);
    --yh-brand-color-disabled: var(--yh-brand-color-3);
    --yh-warning-color-hover: var(--yh-warning-color-4);
    --yh-warning-color-focus: var(--yh-warning-color-2);
    --yh-warning-color-active: var(--yh-warning-color-6);
    --yh-warning-color-disabled: var(--yh-warning-color-3);
    --yh-warning-color-light: var(--yh-warning-color-1);
    --yh-error-color-hover: var(--yh-error-color-5);
    --yh-error-color-focus: var(--yh-error-color-2);
    --yh-error-color-active: var(--yh-error-color-7);
    --yh-error-color-disabled: var(--yh-error-color-3);
    --yh-error-color-light: var(--yh-error-color-1);
    --yh-success-color-hover: var(--yh-success-color-4);
    --yh-success-color-focus: var(--yh-success-color-2);
    --yh-success-color-active: var(--yh-success-color-6);
    --yh-success-color-disabled: var(--yh-success-color-3);
    --yh-success-color-light: var(--yh-success-color-1);
    --yh-mask-active: rgba(0, 0, 0, .6);
    --yh-bg-color-page: var(--yh-gray-color-2);
    --yh-bg-color-container: #fff;
    --yh-bg-color-container-hover: var(--yh-gray-color-1);
    --yh-bg-color-container-active: var(--yh-gray-color-3);
    --yh-bg-color-container-select: #fff;
    --yh-bg-color-secondarycontainer: var(--yh-gray-color-1);
    --yh-bg-color-secondarycontainer-hover: var(--yh-gray-color-2);
    --yh-bg-color-secondarycontainer-active: var(--yh-gray-color-4);
    --yh-bg-color-component: var(--yh-gray-color-3);
    --yh-bg-color-component-hover: var(--yh-gray-color-4);
    --yh-bg-color-component-active: var(--yh-gray-color-6);
    --yh-bg-color-component-disabled: var(--yh-gray-color-2);
    --yh-text-color-primary: var(--yh-font-gray-1);
    --yh-text-color-secondary: var(--yh-font-gray-2);
    --yh-text-color-placeholder: var(--yh-font-gray-3);
    --yh-text-color-disabled: var(--yh-font-gray-4);
    --yh-text-color-anti: #fff;
    --yh-text-color-brand: var(--yh-brand-color) ;
    --yh-text-color-link: var(--yh-brand-color) ;
    --yh-border-level-1-color: var(--yh-gray-color-3);
    --yh-component-stroke: var(--yh-gray-color-3);
    --yh-border-level-2-color: var(--yh-gray-color-4);
    --yh-component-border: var(--yh-gray-color-4);
    --yh-border-level-3-color: var(--yh-gray-color-5);
    --yh-shadow-1: 0 1px 10px rgba(0, 0, 0, .05), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);

}

